<template>
    <div>
        <div style="text-align: left;">
            <el-button ty @click=" submitForm(ruleFormRef)">保存</el-button>
        </div>
        <el-card style="max-width: 100%;margin-top: 20px ;">
            <h1 style="text-align: center;color: black;">质检申请</h1>

            <el-form ref="ruleFormRef" style="max-width: 100%;text-align:center;margin: auto;" :rules="rules"
                label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="关联采购合同" prop="">
                            <el-input v-model="form.proContract" style="width: 250px;">
                                <template #append>
                                    <el-icon :size="20" @click="seach">
                                        <Search />
                                    </el-icon>
                                </template>
                            </el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="供应商名称">
                            <el-input v-model="form.vName" style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="质检主题">
                            <el-input v-model="form.qcTopic" style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>


            <table style="width: 100%;border: 1px solid #ccc;margin-bottom: 50px;">
                <tr>

                    <span>质检申请明细</span>&emsp;&emsp;
                    <el-button @click="addRow">增行</el-button>
                    <el-button @click="deleteTableData">删行</el-button>
                    <el-button @click="">源单引入</el-button>

                </tr>
                <tr style="background-color:#E1E6E6;">
                    <td>
                    <th><input type="checkbox" style="width: 30px;" />
                    </th>
                    <th style="width:150px;">质检人员</th>
                    <th style="width:150px;">产品名称</th>
                    <th style="width:150px;">产品编号</th>
                    <th style="width:150px;">规格</th>
                    <th style="width:150px;">单价</th>
                    <th style="width:150px;">数量</th>
                    <th style="width:150px;">总金额</th>
                    </td>
                </tr>
                <tr>
                    <td>
                <tr v-for="(item, index) in statusList" :key="index">
                    <td><input type="checkbox" style="width: 30px;" /></td>
                    <td><el-input v-model="Qname" type="text" style="width:150px;" @dblclick="person" /></td>
                    <td><el-input v-model="table.sppName" type="text" style="width:150px;" /></td>
                    <td><el-input v-model="table.sppNumber" type="text" style="width:150px;" /></td>
                    <td><el-input v-model="table.sppSpec" type="text" style="width:150px;" /></td>
                    <td><el-input v-model="table.spcPrice" type="text" style="width:150px;" /></td>
                    <td><el-input v-model="table.spcNum" type="text" style="width:150px;" /></td>
                    <td><el-input v-model="table.spcTotalPrice" type="text" style="width:150px;" /></td>
                </tr>
                </td>
                </tr>
            </table>
        </el-card>
    </div>

    <!-- 采购合同弹框 -->
    <el-dialog v-model="dialogTableVisible" title="采购合同" width="900">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="AddClose">
                    确定
                </el-button>
            </el-form-item>
            <el-form-item label="查询条件">
                <el-select style="width:150px">
                    <el-option label="编号" value="1"></el-option>
                    <el-option label="供应商" value="1"></el-option>
                    <el-option label="时间" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.name" autocomplete="off" style="width: 200px;" />
            </el-form-item>
            <el-form-item>
                <el-button @click="">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableDataC" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="pcNumber" label="采购合同编号" />
            <el-table-column prop="vName" label="供应商名称" />
            <el-table-column property="pcName" label="主题" />
            <el-table-column prop="spcAfterPrice" label="采购金额">
                <template #default="scope">
                    <span style="color: red;">{{ scope.row.spcAfterPrice.toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="pContractsDate" label="合同日期">
                <template #default="scope">
                    <span>{{ scope.row.pContractsDate.substring(0, 10) }} {{ scope.row.pContractsDate.substring(11,
                        19) }}</span>
                </template>
            </el-table-column>
        </el-table>

    </el-dialog>

    <!-- 质检人弹框 -->
    <el-dialog v-model="dialogTableVisible1" title="质检人员" width="900">
        <div>
            <el-button @click="AddMan">确定</el-button>
            <el-button>取消</el-button>
        </div>
        <el-row>
            <el-col :span="3">
                <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps"
                    @node-click="handleNodeClick" />
            </el-col>
            <el-col :span="21">
                <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange1">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" label="序号" align="center" />
                    <el-table-column prop="mNumber" label="档案编号" align="center" />
                    <el-table-column prop="mName" label="真实姓名" align="center" />
                    <el-table-column prop="users" label="登录账号" align="center" />
                    <el-table-column prop="mSex" label="性别" align="center">
                        <template v-slot="scope">
                            {{ scope.row.mSex == 1 ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="mPhone" label="联系电话" align="center" />
                    <el-table-column prop="mBirthDay" label="出生日期" align="center">
                        <template v-slot="scope">
                            {{ scope.row.mBirthDay.substring(0, 10) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="sectorName" label="所在部门" align="center" />
                    <el-table-column prop="postName" label="所在岗位" align="center" />
                </el-table>
            </el-col>
        </el-row>

    </el-dialog>


</template>


<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
const router = useRouter()
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import http from '../../../http.js'


const gridData = ref([])
const statusList = ref([])



//采购合同
const dialogTableVisible = ref(false);
const dialogTableVisible1 = ref(false);
const formLabelWidth = '140px'

const form = reactive({
    proContract: '',
    markName: "admin",
    qcTopic: '',
    vName: ''
})






const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入供应商名称', trigger: 'blur' },

    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
})


//#region  人

//质检人员弹框
const person = () => {
    dialogTableVisible1.value = true
    GetPostList()
    GetSectorList()
    GetManpowerList()
}
//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
        })
}

//岗位
const postlist = ref([])
const GetPostList = () => {
    formMan.PostId = "";
    axios.get(http.zblnb + '/vendor/api/Post/GetPostList?SectorId=' + (formMan.SectorId || 0))
        .then(res => {
            postlist.value = res.data.data;
        })
}

//树形
const handleNodeClick = (data: Tree) => {
    console.log(data)
    formMan.SectorId = data.value

    GetManpowerList();
}

//显示人员档案
//查询条件
const formMan = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})
//分页
const Pageman = reactive({
    Pindex: 1,
    Psize: 3,
    pcount: 0,
    lcount: 0
})

const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: Pageman.Pindex,
            Psize: Pageman.Psize,
            MName: formMan.MName || "",
            Mstart: formMan.Mstart || "",
            Mend: formMan.Mend || "",
            Bstart: formMan.Bstart || "",
            Bend: formMan.Bend || "",
            SectorId: formMan.SectorId || "",
            PostId: formMan.PostId || "",
        }
    })
        .then(res => {
            console.log(res.data.data)
            manpowerList.value = res.data.data.list
            Pageman.lcount = res.data.data.lcount;
            Pageman.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}
//多选框
const check = ref([])
let Qname = ref('')
let manId = ref('')
const handleSelectionChange1 = (val: User[]) => {
    check.value = val
    console.log(check.value)



}


const AddMan = () => {
    dialogTableVisible1.value = false
    check.value.forEach((item) => {
        Qname.value = item.mContact
        manId.value = item.manpowerId
    })
    console.log(Qname.value);
}

//#endregion


//#region  采购合同

const seach = () => {
    dialogTableVisible.value = true
    GetShowTime()
}

const formC = reactive({
    pcNumber: '',
    pcPreparationDate1: '',
    pcPreparationDate2: '',
    pcOurRepresentatives: '',
    spcAfterPrice1: '',
    spcAfterPrice2: '',
    vendorId: '',
    purchaseContractsIds: '',
})
const tableDataC = ref([])

const PageC = ref({
    PageIndex: 1,
    PageSize: 10,
    listcount: 0,
    pagecount: 0
})


const GetShowTime = () => {

    axios.get(http.zblnb + "/cg/api/PurchaseContracts/ProductTypeSelectShow", {
        params: {
            PCNumber: formC.pcNumber,
            PContractsDate1: formC.pcPreparationDate1,
            PContractsDate2: formC.pcPreparationDate2,
            PCOurRepresentatives: formC.pcOurRepresentatives,
            VendorId: formC.vendorId,
            PageIndex: PageC.value.PageIndex,
            PageSize: PageC.value.PageSize
        }
    }).then((res) => {
        tableDataC.value = res.data.data.list;
        PageC.value.listcount = res.data.data.totalcount;
        PageC.value.pagecount = res.data.data.pagecount;
        console.log(tableDataC.value)
    })
}
const selctCont = ref([])
const handleSelectionChange = (val: any) => {
    selctCont.value = val;
    console.log(selctCont.value);
};

const AddClose = () => {
    dialogTableVisible.value = false;
    FillProduct()

}

//#endregion
const table = reactive({
    Qname: '',
    spcPrice: '',
    spcTotalPrice: '',
    spcNum: '',
    purchaseContractsIds: '',
    vName: '',
    sppName: '',
    sppNumber: '',
    sppSpec: ''
})

//反填产品
const FillProTable = ref([])
const FillProduct = () => {
    var id = selctCont.value.map(ele => ele.purchaseContractsIds)
    axios.get(http.zblnb + "/cg/api/PurchaseContracts/FanPurchaseContracts?PurchaseContractsIds=" + id).then(res => {
        console.log(res.data.data)
        FillProTable.value = res.data.data
        FillProTable.value.forEach(item => {
            table.spcPrice = item.spcPrice
            table.spcTotalPrice = item.spcTotalPrice
            table.spcNum = item.spcNum
            table.purchaseContractsIds = item.purchaseContractsIds
            form.proContract = item.pcName
            form.vName = item.vName
            table.sppName = item.sppName
            table.sppNumber = item.sppNumber
            table.sppSpec = item.sppSpec
        })
        console.log(table.spcPrice)
    })
}

//生成随机数
var code = "";
const randomCode = () => {
    const randomValue = Math.floor(Math.random() * 1000000);
    code = randomValue.toString().padStart(6, '0');
    console.log(code);

}

var newdata = ref('')
const uptdata = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const date = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    newdata.value = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
    console.log(newdata.value)

}


//提交
const submitForm = () => {
    var Ndate = new Date(newdata.value)
    const addform = ref({
        "purchaseContractsIds": table.purchaseContractsIds,
        "proContract": form.proContract,
        "qcTopic": form.qcTopic,
        "manpowerId": manId.value,
        "qcCode": code,
        "qcPerson": Qname.value,
        "qcTime": Ndate,
    })


    console.log(addform.value)
    axios.post(http.zblnb + "/cg/api/Quality/AddProPcApply", addform.value).then(res => {
        if (res.data.data > 0) {
            ElMessage.success('添加成功')
            router.push("/ShowPurApp")
        } else {
            ElMessage.error('添加失败')
        }
    })
}





const addRow = () => {
    statusList.value.push({
        Qname: '',
        spcPrice: '',
        spcTotalPrice: '',
        spcNum: '',
        sPPName: '',
        sPPNummber: '',
        sPPSpec: '',
        spcNum: ''
    })
}






onMounted(() => {
    uptdata()
    randomCode()
})

</script>

<style scoped></style>